<template>
  <div class="home">
    <h1>关系图</h1>
    <div class="item">
      <relation-line-chart ref="relation"></relation-line-chart>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import RelationLineChart from "@/components/RelationLineChart/index.vue";

@Component({
  name: "Home",
  components: { RelationLineChart }
})
export default class Home extends Vue {
  @Ref("relation")
  private relation!: RelationLineChart;

  createTrianglePoint() {
    const x = Math.ceil(Math.random() * 100);
    const rate = Math.random();
    const y = Number(((100 - x) * rate).toFixed(2));
    const z = 100 - x - y;
    return { x, y, z };
  }

  createPoint(total: number = 50, maxX: number, maxY: number) {
    const points = [];
    for (let i = 0; i < total; i++) {
      points.push({
        x: Math.random() * maxX,
        y: Math.random() * maxY
      });
    }
    return points;
  }

  mounted() {
    const maxX = 1.5,
      maxY = 1;

    this.relation.setOPtions({
      padding: 20,
      axises: {
        x: {
          label: "地层区域",
          color: "red",
          showTick: true
        },
        y: {
          label: "严密读",
          color: "green",
          showTick: true
        }
      },
      lines: [
        {
          label: {
            text: "一号"
          },
          color: "purple",
          type: "dash",
          points: this.createPoint(10, maxX, maxY)
        }
      ],
      series: [
        {
          name: "东昌",
          icon: {
            type: "five-star",
            fill: "red"
          },
          data: this.createPoint(50, maxX, maxY)
        },
        {
          name: "东昌Yihao",
          icon: {
            type: "diamond",
            fill: "purple"
          },
          data: this.createPoint(50, maxX, maxY)
        }
      ]
    });
  }
}
</script>
<style lang="scss" scoped>
.home {
  text-align: center;
  .item {
    margin: 0 auto;
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    &:last-child {
      margin-bottom: 100px;
    }
  }
}
</style>
